<template>
    <base-breadcrumb>
        <searchData :searchData="searchArr" @search="search"></searchData>
        <a-card>
            <s-table
                ref="table"
                size="default"
                rowKey="key"
                :pageKeys="['pageNum', 'pageSize']"
                :columns="columns"
                :data="loadData"
                :alert="true"
                show-size-changer
                show-quick-jumper
                showPagination="auto"
            >
                <span slot="operation" slot-scope="text, record">
                    <a v-if="record.status == 0" @click="handleUpdate(record)">审核</a>
                </span>
                <span slot="status" slot-scope="text, record">
                    <span v-if="record.status == 0">未审核</span>
                    <span v-if="record.status == 1">同意</span>
                    <span v-if="record.status == 2">驳回</span>
                </span>
            </s-table>
        </a-card>
        <a-modal
            title="授权审核"
            :visible="visible"
            :confirm-loading="confirmLoading"
            @ok="handleOk"
            :width="900"
            @cancel="visible = false"
        >
            <a-form-model
                ref="ruleForm"
                :model="form"
                :rules="rules"
                :labelCol="{ lg: { span: 6 }, sm: { span: 6 } }"
                :wrapperCol="{ lg: { span: 16 }, sm: { span: 16 } }"
            >
                <a-row :gutter="24">
                    <s-table
                        bordered
                        ref="tableApproval"
                        size="default"
                        rowKey="key"
                        :columns="columnsApproval"
                        :data="approval"
                        :alert="true"
                        show-size-changer
                        show-quick-jumper
                        :showPagination="false"
                        class="mb20"
                    >
                        <span slot="optType" slot-scope="text, record">
                            <span v-if="record.optType == 0">回收</span>
                            <span v-if="record.optType == 1">授权</span>
                        </span>
                    </s-table>
                    <a-col :md="24" :sm="24">
                        <a-form-model-item label="授权用户">
                            <BaseInput disabled placeholder="授权用户" v-model="approvalName"> </BaseInput>
                        </a-form-model-item>
                    </a-col>
                    <a-col :md="12" :sm="12">
                        <a-form-model-item label="审核状态" prop="status">
                            <a-select placeholder="审核状态" v-model="form.status">
                                <a-select-option :value="1">同意</a-select-option>
                                <a-select-option :value="2">驳回</a-select-option>
                            </a-select>
                        </a-form-model-item>
                    </a-col>
                    <a-col :md="12" :sm="12">
                        <a-form-model-item label="审核意见">
                            <BaseInput placeholder="审核意见" v-model="form.description"> </BaseInput>
                        </a-form-model-item>
                    </a-col>
                </a-row>
            </a-form-model>
        </a-modal>
    </base-breadcrumb>
</template>
<script>
import { STable } from '@/components'
import { getUserroleApproval, submitUserroleApproval, getUserroleDetail } from '@/api/system/system'

const columnsApproval = [
    {
        title: '角色名称',
        dataIndex: 'roleName',
    },
    {
        title: '流程名称',
        dataIndex: 'optType',
        scopedSlots: { customRender: 'optType' },
    },
]
const columns = [
    {
        title: '账号',
        dataIndex: 'username',
    },
    {
        title: '流程名称',
        dataIndex: 'name',
    },
    {
        title: '创建时间',
        dataIndex: 'createTime',
    },
    {
        title: '状态',
        dataIndex: 'status',
        scopedSlots: { customRender: 'status' },
    },
    {
        title: '审核人',
        dataIndex: 'handlerUserName',
    },

    {
        title: '审核时间',
        dataIndex: 'approvalTime',
    },
    {
        title: '审核意见',
        dataIndex: 'description',
    },
    {
        title: '操作',
        dataIndex: 'operation',
        width: '170px',
        scopedSlots: { customRender: 'operation' },
    },
]
const searchArr = [
    {
        name: '账号',
        value: 'usernameLike',
        type: 'input',
    },

    {
        name: '状态',
        value: 'status',
        type: 'select',
        data: [
            {
                value: '0',
                label: '未审核',
            },
            {
                value: '1',
                label: '同意',
            },
            {
                value: '2',
                label: '驳回',
            },
        ],
    },
]
export default {
  name:'a'+Date.now(),
    components: {
        STable,
    },
    data() {
        this.columns = columns
        this.searchArr = searchArr
        this.columnsApproval = columnsApproval
        return {
            form: { id: '', createUserId: JSON.parse(sessionStorage.getItem('ycloud-user_info')).id },
            visible: false,
            approvalName: '',
            confirmLoading: false,
            queryParam: {},
            rules: {
                status: [{ required: true, message: '请输入正确的内容', trigger: 'blur' }],
            },
            approval: async (parameter) => {
                if (this.form.id == '') return
                const requestParameters = Object.assign({}, parameter, { approvalId: this.form.id })
                // console.log(requestParameters)
                const res = await getUserroleDetail(requestParameters)

                return new Promise((resolve, reject) => {
                    // if (res.status == 200) {
                    //     console.log(res)
                    resolve(res)
                    // } else {
                    //     reject(err)
                    // }
                })
            },
            loadData: async (parameter) => {
                const requestParameters = Object.assign({}, parameter, this.queryParam)
                console.log(requestParameters)
                const res = await getUserroleApproval(requestParameters)

                return new Promise((resolve, reject) => {
                    if (res.status == 200) {
                        let obj = {}
                        obj.currentPage = requestParameters.pageNum
                        obj.pageSize = requestParameters.pageSize
                        obj.totalPage = Math.ceil(res.data.total / requestParameters.pageSize)
                        obj.totalSize = res.data.total
                        obj.data = res.data.list
                        console.log(obj)
                        resolve(obj)
                    } else {
                        reject(err)
                    }
                })
            },
        }
    },
    methods: {
        handleReset() {
            this.$refs.ruleForm.resetFields()
        },
        //搜索
        search(val = {}) {
            this.queryParam = {
                ...val,
            }
            console.log(this.queryParam)

            this.$refs.table.refresh(true)
        },
        async handleUpdate(record) {
            this.visible = true

            this.form.id = record.id
            this.approvalName = record.approvalUser.split(',')[0]
            this.$nextTick(() => {
                this.$refs.tableApproval.refresh(true)
            })
        },

        validateForm() {
            let flag = false
            this.$refs.ruleForm.validate((valid) => {
              if(!valid) {
                this.$message.warning("请填写完所有必填项信息")
              }
                flag = valid
            })
            return flag
        },
        async handleOk() {
            if (!this.validateForm()) return
            this.confirmLoading = true
            console.log(this.form)
            const res = await submitUserroleApproval(this.form)
            this.confirmLoading = false
            if (res.status == 200) {
                this.$message.success('成功')
                this.visible = false
                this.handleReset()
                this.$refs.table.refresh(true)
            } else {
                this.$message.success('审核失败')
            }
        },
    },
}
</script>
